<template>
  <div>
    <div class="container">
       
      
      <div class="searchbox">
        <div class="search-form">
          <input type="text" placeholder="请输入书名、作者或标签" />
          <div class="bon">
            <svg
              t="1664022009379"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2544"
              width="200"
              height="200"
            >
              <path
                d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
                p-id="2545"
              ></path>
            </svg>
          </div>
        </div>

        <div class="search-status">未找到<b class="spec">""</b>的相关作品</div>
      </div>

      <div class="public-module">
        <div class="module-head">
          <div class="title">小编推荐</div>
        </div>
        <div class="book-media">
          <div class="bookbox" v-for="(item,index) in lists" :key="index">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="textbox">
              <h3>{{item.name}}</h3>
              <p class="summary">
           {{item.content}}
              </p>
              <span class="b-num">{{item.writer}}&nbsp;&nbsp;{{item.words}}</span>
            </div>
          </div>

          <!-- <div class="bookbox">
            <div class="img">
              <img src="../assets/img/BOOK11.jpg" alt="" />
            </div>
            <div class="textbox">
              <h3>大话秦朝之神级军团系统</h3>
              <p class="summary">
                主角苏辰为了20万的彩礼,被疯博士坑,带着神级军团系统穿越到...
              </p>
              <span class="b-num">肿瘤医生&nbsp;&nbsp;134万字</span>
            </div>
          </div>

          <div class="bookbox">
            <div class="img">
              <img src="../assets/img/BOOK22.jpg" alt="" />
            </div>
            <div class="textbox">
              <h3>大话秦朝之神级军团系统</h3>
              <p class="summary">
                主角苏辰为了20万的彩礼,被疯博士坑,带着神级军团系统穿越到...
              </p>
              <span class="b-num">肿瘤医生&nbsp;&nbsp;134万字</span>
            </div>
          </div>

          <div class="bookbox">
            <div class="img">
              <img src="../assets/img/BOOK33.jpg" alt="" />
            </div>
            <div class="textbox">
              <h3>大话秦朝之神级军团系统</h3>
              <p class="summary">
                主角苏辰为了20万的彩礼,被疯博士坑,带着神级军团系统穿越到...
              </p>
              <span class="b-num">肿瘤医生&nbsp;&nbsp;134万字</span>
            </div>
          </div>

          <div class="bookbox">
            <div class="img">
              <img src="../assets/img/book4.jpg" alt="" />
            </div>
            <div class="textbox">
              <h3>大话秦朝之神级军团系统</h3>
              <p class="summary">
                主角苏辰为了20万的彩礼,被疯博士坑,带着神级军团系统穿越到...
              </p>
              <span class="b-num">肿瘤医生&nbsp;&nbsp;134万字</span>
            </div>
          </div>

          <div class="bookbox">
            <div class="img">
              <img src="../assets/img/book5.jpg" alt="" />
            </div>
            <div class="textbox">
              <h3>大话秦朝之神级军团系统</h3>
              <p class="summary">
                主角苏辰为了20万的彩礼,被疯博士坑,带着神级军团系统穿越到...
              </p>
              <span class="b-num">肿瘤医生&nbsp;&nbsp;134万字</span>
            </div>
          </div> -->
        </div>
      </div>

      <div class="footer">
        <p class="link">
          <a href="">小说首页</a>
          <span>|</span>
          <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.kmxs.reader"
            >手机客户端</a
          >
          <span>|</span>
          <a href="#xtopjsinfo" class="go_top">返回顶部</a>
        </p>

        <p class="link">
          <a href="">问题反馈</a>
          <span>|</span>
          <a href="#xtopjsinfo" class="go_top">版权声明</a>
        </p>

        <p class="link">
          <a href="">若发现不良信息,请您告知客服,客服QQ:3284839587</a>
        </p>

        <p class="link">
          <a href="">
            <i> 版权所有 ©km.com All Rights Reserved</i> 沪ICP备16039144号-1</a
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {getsearchData} from "../api/home.js"

export default {
  data(){
    return{
      lists:null,
      
    }
  },
  created(){
    getsearchData().then(data=>{
      console.log(data)
      console.log(data.data)
      this.lists=data.data
    })
  }
};
</script>

<style lang="scss" scoped>

.searchbox {
  padding: 16px;
  .search-form {
    border-radius: 6px;
    display: flex;
    background-color: #ffffff;
    justify-content: space-between;
    margin-bottom: 20px;
    input {
      outline: none;
      border: none;
      padding: 8px 0px;
      padding-left: 14px;
      padding-right: 30px;
      font-size: 16px;
      border-radius: 6px;
    }
    .bon {
      height: 40px;
      line-height: 40px;
      .icon {
        width: 16px;
        height: 16px;
        padding-left: 20px;
        padding-right: 20px;
        border-left: 1px solid #ebebeb;
      }
    }
  }
  .search-status {
    display: flex;
    font-size: 16px;
    color: #666666;
    justify-content: center;
    .spec {
      color: #ff9744;
    }
  }
}
.public-module {
  background-color: #ffffff;
  .module-head {
    padding: 0 16px;
    .title {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #333333;
    }
  }
  .book-media {
    padding: 16px;
    padding-top: 6px;
    .bookbox {
      display: flex;
      padding: 10px 0px;
      .img {
        img {
          height: 104px;
          width: auto;
        }
      }
      .textbox {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-left: 10px;
        h3 {
          font-size: 16px;
          color: #333333;
          font-weight: normal;
        }
        .summary {
          font-size: 14px;
          color: #999999;
        }
        .b-num {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
.container {
    .nav {
    display: flex;
    justify-content: space-around;
    background-color: #ffda33;
    a {
      height: 40px;
      line-height: 40px;
      justify-content: space-around;
      font-size: 18px;
      color: #666666;
      padding: 0 16px;
    
    }
    // .con{
    //     color: #ff9744;
    //   border-bottom: 2px solid #ff9744;
    // }
    .router-link-active {
      color: #ff9744;
      border-bottom: 2px solid #ff9744;
    }
  }

  .header {
  height: 58px;
  display: flex;
  justify-content: space-between;
align-items: center;
  // padding-top: 2px;
  background-color: #ffffff;
  padding-left: 14px;
  padding-right: 14px;
  // margin-right: 10px;

  .caption {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }

  .person {
    width: 20px;
    height: 20px;
    .icon {
      width: 20px;
      height: 20px;
    }
  }

  // .headerbox {
  //   text-align: center;
  //   border-radius: 20px;
  //   padding-left: 14px;
  //   padding-right: 14px;
  //   margin-right: 10px;
  //   &:nth-child(1) {
  //     margin-right: 20px;
  //     background-color: #ffa55b;
  //     a {
  //       color: #ffffff;
  //     }
  //   }
  //   &:nth-child(2) {
  //     background-color: #ffffff;
  //     border: 1px solid #ffa55b;
  //   }
  //   a {
  //     color: #ffae6b;
  //     height: 34px;
  //     line-height: 34px;
  //     font-size: 16px;
  //   }
  // }
}
  .footer {
    margin-top: 34px;
    background-color: #ffffff;
    padding-top: 18px;
    .link {
      display: flex;
      justify-content: center;
      margin-bottom: 6px;
      a {
        color: #999999;
        font-size: 14px;
      }
      i {
        color: #999999;
        font-size: 10px;
      }
      span {
        margin: 0 7px;
        color: #999999;
        font-size: 12px;
        list-style: none;
      }
      &:nth-child(4) {
        padding-top: 6px;
        padding-bottom: 14px;
      }
    }
  }
}



</style>